<template>
  <div>
    <head-vue></head-vue>
    <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;">
      <ul class="mt-2">
        <li id="menu-1" class="m-active" @click="menu1()"><i class="bi bi-search ml-4"></i> 商户概况</li>
<!--        <li id="menu-2" @click="menu2()"><i class="bi bi-clipboard-plus ml-4"></i> 商户信息</li>-->
      </ul>
    </div>
    <BusinessProfile id="BusinessProfile"></BusinessProfile>
    <BusinessInfo id="BusinessInfo" v-show="flag"></BusinessInfo>
  </div>

</template>

<script>
    export default {
        name: "Home",
      data(){
          return{
            flag:false,
          }
      },
      methods:{
        menu1(){
          $("#menu-1").attr("class","m-active")
          $("#menu-2").attr("class"," ")
          $("#BusinessProfile").fadeIn(300)
          $("#BusinessInfo").hide()
        },
        menu2(){
          $("#menu-1").attr("class"," ")
          $("#menu-2").attr("class","m-active")
          $("#BusinessProfile").hide()
          this.flag=true
          $("#BusinessInfo").fadeIn(300)
        }
      }
    }
</script>

<style scoped>
  li{
    list-style: none;
    /*background-color: #F0FAFF;*/
    cursor: pointer;
    height: 3rem;
    line-height: 2.9rem;
  }
  ul{
    padding: 0;
  }
  .m-active{
    background-color: #F0FAFF;
    border-right: 2px solid #2D8CF0;
  }
</style>
